<template>
    <div class="bottom-bar">
        <div class="check">
            <check-button  class="check-button"/>
            <span>全选</span>
        </div>
        <div class="price">
            合计:{{totalPrice}}
        </div>
    </div>
</template>

<script>
import CheckButton from './CheckButton'
export default {
   name:'cartBottomBar',
   components:{
       CheckButton
   },
   computed: {
        totalPrice(){
            //console.log("this.$store.state.cartList",this.$store.state.cartList);
            return this.$store.state.cartList.filter(item=>{
                //console.log('*************',item);
                 
                return item.checked
            }).reduce((preValue,item)=>{
                //console.log('pre----------'+'现价'+item.price+'++++++++++++'+item.count);
                   
                return preValue+item.price * item.count                
            },0).toFixed(2)
        }
   }
}
</script>

<style scoped>
.bottom-bar{
    height: 40px;
    position: fixed;
    background-color: #eee;
    left: 0;
    right: 0;
    bottom: 50px;
    display: flex;
}
.check{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.check-button{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.price{
    margin-left: 10px;
    line-height: 40px;
}
</style>